<template>
  <!-- 一条文章单元格 -->
  <div class="arItem">
    <van-cell border @click="$router.push('/article?art_id=' + item.art_id)">
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{ item.title }}</span>
          <!-- 单图 -->
          <img
            v-if="item.cover.type === 1"
            class="thumb"
            :src="item.cover.images[0]"
          />
        </div>
        <div class="thumb-box" v-if="item.cover.type > 1">
          <img
            v-for="(imgUrl, index) in item.cover.images"
            :key="index"
            class="thumb"
            :src="imgUrl"
          />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}</span>
            <span>{{ formTimeAgoFn(item.pubdate) }}</span>
          </div>
          <!-- 反馈按钮 -->
          <!-- stop: vue中的阻止冒泡 -->
          <van-icon
            name="cross"
            @click.stop="show1 = true"
            v-if="isShowCross"
          />
          <!-- 一级反馈 -->
          <van-action-sheet
            v-model="show1"
            :actions="actions1"
            @select="onselectFn"
            get-container="body"
            cancel-text="取消"
          >
          </van-action-sheet>

          <!-- 二级反馈面板 -->
          <van-action-sheet
            v-model="show2"
            :actions="actions2"
            @select="onselectFn"
            get-container="body"
            cancel-text="返回"
          >
          </van-action-sheet>

          <van-dialog
            v-model="show3"
            title="反馈其他问题"
            show-cancel-button
            get-container="body"
            :before-close="onbeforeCloseFn"
          >
            <!-- trim: 去掉收尾空格 -->
            <van-field
              v-model.trim="msg"
              type="textarea"
              placeholder="请输入反馈的内容1-99字"
              border
              v-jujiao
            />
          </van-dialog>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { artDisLikeAPI, arReportsAPI } from "@/api/home";

// 按需导入
import { ONE_ACTIONS_SHEET, TWO_ACTIONS_SHEET } from "@/constant";
import { Toast } from "vant";
export default {
  name: "Aritems",
  props: {
    // 父传子 文章 对象
    item: {
      type: Object,
      require: true,
    },
    // 父传子 文章 对象 在数组中的下标
    i: Number,
    // 控制 搜索结果页的 x号 的可见性
    isShowCross: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show1: false, // 控制一级反馈面板的 可见性， false表示隐藏
      show2: false, // 控制二级级反馈面板的 可见性， false表示隐藏
      show3: false, // 控制二级级反馈面板的 可见性， false表示隐藏
      msg: "",
      actions1: ONE_ACTIONS_SHEET, // 一级反馈面板的显示内容
      actions2: TWO_ACTIONS_SHEET, // 二级反馈面板的显示内容
    };
  },
  created() {
    this.item.pubdate = this.formTimeAgoFn(this.item.pubdate);
  },
  methods: {
    async onbeforeCloseFn(action, done) {
      if (action === "confirm") {
        if (this.msg.length === 0) {
          Toast("请输入反馈内容");

          done(false);
        } else {
          done();
          try {
            await arReportsAPI({
              artId: this.item.art_id,
              type: "0",
              remark: this.msg,
            });
            Toast.success("反馈成功");
          } catch (e) {
            Toast.fail(e.message || "反馈失败");
          }
        }
      } else {
        done();
      }
      this.msg = "";
    },

    async onselectFn(actionObj) {
      if (actionObj.id === 22) {
        // 反馈垃圾内容
        // 显示二级控制面板
        this.show2 = true;
      } else if (actionObj.id === 11) {
        // 不感兴趣
        // 1. 删除文章

        // 两次子传父
        this.$emit("del-art", this.i);

        // 2. 发请求，告诉后台，从数据库中删除
        try {
          await artDisLikeAPI({
            artId: this.item.art_id,
          });
          // console.log(resp);
          Toast.success("删除成功");
        } catch {
          Toast.fail("删除失败");
        }
      } else if (actionObj.id === 33) {
        // 拉黑作者
      } else {
        // 二级反馈 - 举报

        if (actionObj.id === 0) {
          this.show3 = true;
        } else {
          try {
            await arReportsAPI({
              artId: this.item.art_id,
              type: actionObj.id + "",
              // remark: actionObj.id + '' === '0' ? '用户输入的原因':actionObj.name
              remark: actionObj.name,
            });
            Toast.success("反馈成功");
          } catch (e) {
            Toast.fail(e.message || "反馈失败");
          }
        }
        // 隐藏一级 二级反馈面板
        this.show1 = this.show2 = false;
      }
    },
  },
};
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>